<template>
	<view class="customer">
		<!-- <image v-if="userId" style="width: 0;height: 0;position: absolute;top: 0;left: 0;" :src="`https://ywtmp.hnwytkj.com/static/images/${userId}/shareCard.jpg`" mode=""></image> -->
		<view class="search-box">
			<image src="https://ywtmp.hnwytkj.com/static/images/search.png" mode=""></image>
			<input v-model="params.visitedName" type="text" placeholder="搜索姓名/企业/行业" confirm-type="search"
				@confirm="confirm" />
		</view>
		<view class="content-section">
			<view class="tabs-box">
				<view class="tabs-item" :class="{ active: params.visitType === 0 }" @tap="changeTab(0)">访客</view>
				<view class="tabs-item" :class="{ active: params.visitType === 1 }" @tap="changeTab(1)">线索</view>
				<view class="tabs-item" :class="{ active: params.visitType === 2 }" @tap="changeTab(2)">客户</view>
			</view>
			<view class="list-box">
				<view class="list-item" v-for="item in list" :key="item">
					<image :src="item.visitorFac" mode="" class="avatar"></image>
					<view class="right">
						<view class="top">
							<text>{{ item.visitorName }}</text>
							<view class="text">
								<text v-if="item.visitCount">总访问<text class="num">{{ item.visitCount }}</text>次，</text>
								<text>最近访问{{ dateFomat(item.latestVisitTime) }}</text>
							</view>
						</view>
						<view class="bottom">
							<view class="btn" @tap="look(item)">查看详情</view>
							<view
								v-if="token && userInfo.userProfileDO && userInfo.userProfileDO.realName && userInfo.companyProfileDO.companyName"
								class="btn btn2">发送名片<button open-type="share"></button></view>
							<view
								v-if="!(token && userInfo.userProfileDO && userInfo.userProfileDO.realName && userInfo.companyProfileDO.companyName)"
								class="btn btn2" @tap="send">发送名片</view>
							<view class="btn btn3" @tap="setStatus(item)">更改状态</view>
						</view>
					</view>
				</view>
				<view v-if="!(list && list.length)" class="nodata">
					<image src="../../static/images/nodata.png" mode="widthFix"></image>
					<view class="text">暂无数据</view>
				</view>
			</view>
		</view>
		<loginModal ref="loginModal" @success="success" />
		<CustomTabBar :selected="1" :display="display"/>
	</view>
</template>

<script>
import moment from 'moment'
import http from '@/utils/http.js'
import loginModal from '@/components/login/index.vue'
import CustomTabBar from '@/components/CustomTabBar/index.vue'
export default {
	components: { loginModal, CustomTabBar },
	data() {
		return {
			token: '',
			userId: '',
			userInfo: {},
			params: {
				pageSize: 10,
				pageNo: 1,
				visitType: 0,
				visitedName: ''
			},
			list: [],
			total: 0,
			loading: false,
			isEnd: false,
			refresh: false,
			display: 0
		}
	},
	onLoad() {
		// this.getData()
		// http({
		// 	url: 'card/visitor/create',
		// 	method: 'post',
		// 	data: {
		// 		visitedUserId: 3,
		// 		visitingUserId: 20880,
		// 		visitType: 0,
		// 		visitCount: 1,
		// 		latestVisitTime: new Date().toLocaleDateString('chinese',{hour12: false})
		// 	}
		// })
	},
	onShow() {
		this.userId = uni.getStorageSync('userId')
		this.token = uni.getStorageSync('token')
		if (this.token) {
			this.refresh = true
			this.getData()
			this.getUserData()
		} else {
			this.list = []
		}
	},
	methods: {
		send() {
			if (!this.token) {
				uni.showModal({
					title: '提示',
					content: '您还未登录，去登录？',
					success: (res) => {
						if (res.confirm) {
							// uni.navigateTo({
							// 	url: '/pages/login/index'
							// })
							this.login()
						}
					}
				})
				return false
			}
			if (!this.userInfo.userProfileDO.realName) {
				uni.showModal({
					title: '提示',
					content: '您还未完善个人信息，去完善？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pagesA/edit/editEnterpriseInformation'
							})
						}
					}
				})
				return false
			}
			if (!this.userInfo.companyProfileDO.companyName) {
				uni.showModal({
					title: '提示',
					content: '您还未完善企业信息，去完善？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pagesA/edit/editProfile'
							})
						}
					}
				})
				return false
			}
		},
		dateFomat(time) {
			return moment(time).format('YYYY-MM-DD HH:mm:ss') //.endOf('day').fromNow()
		},
		confirm(e) {
			if (!this.token) {
				uni.showModal({
					title: '提示',
					content: '您还未登录，去登录？',
					success: (res) => {
						if (res.confirm) {
							// uni.navigateTo({
							// 	url: '/pages/login/index'
							// })
							this.login()
						}
					}
				});
				return false
			}
			this.params.pageNo = 1
			this.refresh = true
			this.getData();
		},
		success() {
			this.userId = uni.getStorageSync('userId')
			this.token = uni.getStorageSync('token')
			if (this.token) {
				this.refresh = true
				this.getData()
				this.getUserData()
			}
		},
		login() {
			// uni.navigateTo({
			// 	url: '/pages/login/index'
			// })
			this.$refs.loginModal.open()
		},
		look(item) {
			uni.navigateTo({
				url: `/pagesA/share/card?id=${item.visitingUserId}&encrypted=${this.userInfo.userProfileDO.level}`
			})
		},
		setStatus(item) {
			uni.showActionSheet({
				itemList: this.params.visitType === 0 ? ['线索', '客户'] : this.params.visitType === 1 ? ['访客', '客户'] : this.params.visitType === 2 ? ['访客', '线索'] : [],
				success: (res) => {
					console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					let visitType = 0
					if (this.params.visitType === 0) {
						visitType = res.tapIndex === 0 ? 1 : 2
					} else if (this.params.visitType === 1) {
						visitType = res.tapIndex === 0 ? 0 : 2
					} else {
						visitType = res.tapIndex === 0 ? 0 : 1
					}
					http({
						url: 'card/visitor/update',
						method: 'put',
						data: {
							visitType,
							id: item.visitingUserId
						}
					}).then(res => {
						if (res.code === 0) {
							this.params.pageNo = 1
							this.refresh = true
							this.getData();
						}
					})
				},
				fail: (res) => {
					console.log(res.errMsg);
				}
			});
		},
		loadMore() {
			if (this.loading || this.isEnd) return;
			this.params.pageNo++;
			this.getData();
		},
		changeTab(n) {
			this.params.visitType = n
			this.params.pageNo = 1;
			this.refresh = true
			this.getData();
		},
		saveShare() {
			http({
				url: 'card/user-profile/like/update',
				method: 'put',
				data: {
					userId: uni.getStorageSync('userId'),
					type: 1
				}
			})
		},
		getData() {
			this.loading = true;
			const p = {
				...this.params
			}
			if (!p.visitedName) {
				delete p.visitedName
			}
			http({
				url: 'card/visitor/page',
				data: {
					...p
				}
			}).then(res => {
				this.loading = false;
				if (res.code === 0) {
					if (this.refresh) {
						this.list = []
					}
					this.list = this.list.concat(res.data.list)
					this.total = res.data.total
					if (this.list.length >= this.total) {
						this.isEnd = true
					}
				}
			})
		},
		getUserData() {
			http({
				url: 'card/user-profile/get'
			}).then(res => {
				if (res.code === 0) {
					this.display = res.data.display || 0
					this.userInfo = res.data
				}
			})
		}
	},
	onReachBottom() {
		// 触发加载更多逻辑
		this.loadMore();
	},
	onShareAppMessage() {
		const userId = uni.getStorageSync('userId')
		this.saveShare()
		return {
			title: '您好，这是我的名片，请惠存',
			path: `/pagesA/share/card?id=${userId}&encrypted=${this.userInfo.userProfileDO.level}`, // 分享的路径
			// path: `/pagesA/share/card?id=${userId}&encrypted=${this.info.userProfileDO.encryptedData}`, // 分享的路径
			imageUrl: `https://ywtmp.hnwytkj.com/static/images/${userId}/shareCard.jpg?t=${Math.random()}` // 可选，分享图片的路径
		}
	}
}
</script>

<style lang="scss" scoped>
.customer {
	background-color: #F0F0F4;
	padding: 20rpx;
	min-height: 100vh;
	box-sizing: border-box;

	.search-box {
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		margin-top: 10rpx;

		image {
			width: 32rpx;
			height: 32rpx;
		}

		input {
			height: 100rpx;
			flex: 1;
			padding-left: 22rpx;
			font-weight: 500;
			font-size: 28rpx;
			// color: #999999;
		}
	}

	.content-section {
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 30rpx 0 10rpx;
		margin-top: 20rpx;
		min-height: calc(100vh - 348rpx);

		.tabs-box {
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
			display: flex;

			.tabs-item {
				flex: 1;
				position: relative;
				text-align: center;
				padding-bottom: 19rpx;
				border-bottom: 6rpx solid #E6ECFF;

				&.active {
					&::after {
						content: '';
						position: absolute;
						bottom: -6rpx;
						left: 0;
						width: 100%;
						height: 6rpx;
						background-color: #4B73FF;
					}
				}
			}
		}

		.list-box {
			padding: 8rpx 30rpx 0;

			.list-item {
				height: 182rpx;
				border-bottom: 2rpx solid #E6ECFF;
				display: flex;
				align-items: center;

				&:last-child {
					border-bottom: 0 none;
				}

				.avatar {
					width: 120rpx;
					height: 120rpx;
					background: #E3E3E3;
					border-radius: 60rpx;
				}

				.right {
					margin-left: 30rpx;
					flex: 1;

					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;

						.text {
							font-weight: 500;
							font-size: 22rpx;
							color: #CCCCCC;

							.num {
								color: #FF992C;
							}
						}
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 26rpx;

						.btn {
							width: 160rpx;
							height: 70rpx;
							line-height: 70rpx;
							text-align: center;
							background: #E6ECFF;
							border-radius: 35rpx;
							font-weight: 500;
							font-size: 26rpx;
							position: relative;

							&.btn2 {
								background: #EAFBF5;
								color: #17B185;
							}

							&.btn3 {
								background: #FFF0DD;
								color: #FF7C3B;
							}

							button {
								position: absolute;
								width: 100%;
								height: 100%;
								top: 0;
								left: 0;
								opacity: 0;
							}
						}
					}
				}
			}

			.nodata {
				text-align: center;
				padding-top: 200rpx;

				image {
					width: 50%;
				}

				.text {
					font-size: 32rpx;
					margin-top: 36rpx;
				}
			}
		}
	}
}
</style>